import React, { Component } from "react";
import { Button } from "antd";
import { CloseOutlined } from "@ant-design/icons";

export default class DragModal extends Component {
  onMouseDown = (event) => {
    let box = this.textNode;
    box.style.cursor = "move";
    // 获取鼠标在页面中的位置
    let pageX = event.pageX;
    let pageY = event.pageY;
    // 获取鼠标按下时在盒子中的位置
    let boxX = pageX - box.offsetLeft;
    let boxY = pageY - box.offsetTop;
    onmousemove = (event) => {
      // let event = event
      // 获取鼠标在页面中的位置
      let pageX = event.pageX;
      let pageY = event.pageY;
      // box跟着鼠标移动
      box.style.left = pageX - boxX + "px";
      box.style.top = pageY - boxY + "px";
    };
  };

  onMouseUp = () => {
    let box = this.textNode;
    box.style.cursor = "default";
    onmousemove = null;
  };

  ondragstart = () => {
    return false;
  };

  // 关闭模态框
  cancelShowModal = () => {
    this.props.changeModalStatus(false);
  };

  render() {
    const {
      visible,
      title,
      okText,
      cancelText,
      maskClosable,
      mask,
      closable,
      height,
      children,
      isDrag,
      width,
    } = this.props;

    return (
      visible && (
        <>
          <div
            id="box"
            onMouseDown={isDrag ? this.onMouseDown : undefined}
            ref={(node) => {
              this.textNode = node;
            }}
            onMouseUp={this.onMouseUp}
            onDragStart={this.onDragStart}
          >
            <div className="header">
              <div className="header_title">{title}</div>
              {closable && (
                <div className="close_btn" onClick={this.cancelShowModal}>
                  <CloseOutlined />
                </div>
              )}
            </div>
            <div
              className="content"
              style={{ minHeight: height ? height : 200, width }}
            >
              {children ? (
                children
              ) : (
                <>
                  <p>123131312</p>
                  <p>123131312</p>
                  <p>123131312</p>
                </>
              )}
            </div>
            <div className="footer">
              <Button type="primary">{okText ? okText : "确定"}</Button>
              <Button
                style={{ marginLeft: "8px" }}
                onClick={this.cancelShowModal}
              >
                {cancelText ? cancelText : "取消"}
              </Button>
            </div>
          </div>
          {mask && (
            <div
              id="mask"
              onClick={maskClosable ? this.cancelShowModal : undefined}
            ></div>
          )}
        </>
      )
    );
  }
}
